@{
    ViewData["Title"] = "点检保养项目管理";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@ViewData["Title"]</title>
    <!-- 引入layui CSS -->
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css">
    <style>
        body {
            margin: 0;
            padding: 10px;
            background-color: #f2f2f2;
        }
        .search-container {
            background-color: #fff;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .table-container {
            background-color: #fff;
            padding: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .toolbar-area {
            margin-bottom: 15px;
        }
        .search-form .layui-form-item {
            margin-bottom: 10px;
        }
        .search-form .layui-form-label {
            width: 80px;
            padding: 9px 10px;
        }
        .search-form .layui-input-block {
            margin-left: 110px;
        }
        .enabled-yes {
            color: #5FB878;
            font-weight: bold;
        }
        .enabled-no {
            color: #FF5722;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div class="layui-container-fluid">
    <!-- 查询条件区域 -->
    <div class="search-container">
        <form class="layui-form search-form" lay-filter="searchForm">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectCode" placeholder="请输入项目编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="projectName" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">项目类型</label>
                        <div class="layui-input-block">
                            <select name="projectType" lay-search="">
                                <option value="">请选择项目类型</option>
                                <option value="设备点检">设备点检</option>
                                <option value="设备保养">设备保养</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否启用</label>
                        <div class="layui-input-block">
                            <select name="isEnabled">
                                <option value="">全部</option>
                                <option value="true">是</option>
                                <option value="false">否</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12" style="text-align: center;">
                    <button type="button" class="layui-btn" id="searchBtn">
                        <i class="layui-icon layui-icon-search"></i> 搜索
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="resetBtn">
                        <i class="layui-icon layui-icon-refresh-1"></i> 重置
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- 数据表格区域 -->
    <div class="table-container">
        <!-- 工具栏 -->
        <div class="toolbar-area">
            <button type="button" class="layui-btn" id="addBtn">
                <i class="layui-icon layui-icon-add-1"></i> 新增
            </button>
            <button type="button" class="layui-btn layui-btn-danger" id="deleteBatchBtn">
                <i class="layui-icon layui-icon-delete"></i> 批量删除
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="refreshBtn">
                <i class="layui-icon layui-icon-refresh"></i> 刷新
            </button>
        </div>

        <!-- 数据表格 -->
        <table id="maintenanceplanTable" lay-filter="maintenanceplanTable"></table>
    </div>
</div>

<!-- 操作列工具栏模板 -->
<script type="text/html" id="operationTpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i> 修改
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i> 删除
    </a>
</script>

<!-- 是否启用列模板 -->
<script type="text/html" id="enabledTpl">
    {{# if(d.isEnabled) { }}
        <span class="enabled-yes">是</span>
    {{# } else { }}
        <span class="enabled-no">否</span>
    {{# } }}
</script>

<!-- 项目类型列模板 -->
<script type="text/html" id="projectTypeTpl">
    {{# if(d.projectType === '设备点检') { }}
        <span class="layui-badge layui-bg-blue">设备点检</span>
    {{# } else if(d.projectType === '设备保养') { }}
        <span class="layui-badge layui-bg-green">设备保养</span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">{{d.projectType}}</span>
    {{# } }}
</script>

<!-- 引入jQuery -->
<script src="~/libs/jquery/jquery.js"></script>
<!-- 引入layui JS -->
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
<!-- 引入页面导航工具 -->
<script src="~/libs/scripts/page-navigator.js"></script>

<script>
// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    console.log('页面DOM加载完成');
    
    // 检查layui是否正确加载
    if (typeof layui === 'undefined') {
        console.error('layui未正确加载！');
        alert('layui框架加载失败，请检查网络连接！');
        return;
    }
    
    console.log('layui已加载，版本:', layui.version);
    
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        
        console.log('layui模块加载完成');
        
        // 页面导航工具对象 - 使用全局PageNavigator
        var LocalPageNavigator = {
            // 新增页面跳转
            openAddPage: function() {
                console.log('点击新增按钮');
                var url = '@Url.Action("Add", "Maintenanceplan", new { area = "ProductionSystem" })';
                if (window.PageNavigator) {
                    window.PageNavigator.navigateTo(url, '添加点检保养项目', {
                        tabId: 'maintenanceplan-add'
                    });
                } else {
                    // 降级处理
                    if (parent && parent.loadPage) {
                        parent.loadPage(url);
                    } else {
                        window.location.href = url;
                    }
                }
            },
            
            // 修改页面跳转
            openEditPage: function(id, projectName) {
                console.log('点击修改按钮, ID:', id);
                var url = '@Url.Action("Edit", "Maintenanceplan", new { area = "ProductionSystem" })?id=' + id;
                var title = '修改点检保养项目' + (projectName ? ' - ' + projectName : '');
                if (window.PageNavigator) {
                    window.PageNavigator.navigateTo(url, title, {
                        tabId: 'maintenanceplan-edit-' + id
                    });
                } else {
                    // 降级处理
                    if (parent && parent.loadPage) {
                        parent.loadPage(url);
                    } else {
                        window.location.href = url;
                    }
                }
            }
        };
        
        // 渲染表格
        table.render({
            elem: '#maintenanceplanTable',
            url: '@Url.Action("GetList", "Maintenanceplan", new { area = "ProductionSystem" })',
            method: 'GET',
            page: true,
            limits: [10, 20, 50, 100],
            limit: 10,
            loading: true,
            cellMinWidth: 80,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width: 80, fixed: 'left', sort: true},
                {field: 'projectCode', title: '项目编码', width: 120, sort: true},
                {field: 'projectName', title: '项目名称', width: 200, sort: true},
                {field: 'projectType', title: '项目类型', width: 120, templet: '#projectTypeTpl'},
                {field: 'projectContent', title: '项目内容', width: 300},
                {field: 'standard', title: '标准', width: 200},
                {field: 'isEnabled', title: '是否启用', width: 100, templet: '#enabledTpl'},
                {field: 'createTime', title: '创建时间', width: 160, sort: true},
                {field: 'createUser', title: '创建人', width: 120},
                {title: '操作', width: 150, fixed: 'right', toolbar: '#operationTpl'}
            ]],
            parseData: function(res) {
                console.log('表格数据返回:', res);
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.count,
                    "data": res.data
                };
            },
            done: function(res, curr, count) {
                console.log('表格渲染完成, 数据量:', count);
            }
        });

        // 搜索按钮事件
        $('#searchBtn').on('click', function() {
            console.log('点击搜索按钮');
            var searchData = {
                projectCode: $('input[name="projectCode"]').val(),
                projectName: $('input[name="projectName"]').val(),
                projectType: $('select[name="projectType"]').val(),
                isEnabled: $('select[name="isEnabled"]').val()
            };
            
            console.log('搜索条件:', searchData);
            table.reload('maintenanceplanTable', {
                where: searchData,
                page: {
                    curr: 1
                }
            });
        });

        // 重置按钮事件
        $('#resetBtn').on('click', function() {
            console.log('点击重置按钮');
            // 清空表单
            document.querySelector('.search-form').reset();
            form.render();
            
            // 重新加载表格
            table.reload('maintenanceplanTable', {
                where: {},
                page: {
                    curr: 1
                }
            });
        });

        // 新增按钮事件
        $('#addBtn').on('click', function() {
            console.log('新增按钮被点击');
            LocalPageNavigator.openAddPage();
        });

        // 批量删除按钮事件
        $('#deleteBatchBtn').on('click', function() {
            console.log('点击批量删除按钮');
            var checkStatus = table.checkStatus('maintenanceplanTable');
            var data = checkStatus.data;
            
            if (data.length === 0) {
                layer.msg('请选择要删除的数据', {icon: 5});
                return;
            }
            
            var ids = [];
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].id);
            }
            
            layer.confirm('确定要删除选中的 ' + data.length + ' 条记录吗？', {
                btn: ['确定', '取消'],
                title: '删除确认'
            }, function(index) {
                // 发送删除请求
                $.ajax({
                    url: '@Url.Action("DeleteBatch", "Maintenanceplan", new { area = "ProductionSystem" })',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    success: function(result) {
                        if (result.success) {
                            layer.msg(result.message, {icon: 1});
                            table.reload('maintenanceplanTable');
                        } else {
                            layer.msg(result.message, {icon: 2});
                        }
                    },
                    error: function() {
                        layer.msg('网络错误，请稍后重试', {icon: 2});
                    }
                });
                layer.close(index);
            });
        });

        // 刷新按钮事件
        $('#refreshBtn').on('click', function() {
            console.log('点击刷新按钮');
            table.reload('maintenanceplanTable');
        });

        // 监听行工具栏事件
        table.on('tool(maintenanceplanTable)', function(obj) {
            var data = obj.data;
            console.log('表格操作:', obj.event, data);
            
            if (obj.event === 'edit') {
                // 修改
                LocalPageNavigator.openEditPage(data.id, data.projectName);
            } else if (obj.event === 'delete') {
                // 删除
                layer.confirm('确定要删除项目"' + data.projectName + '"吗？', {
                    btn: ['确定', '取消'],
                    title: '删除确认'
                }, function(index) {
                    $.ajax({
                        url: '@Url.Action("Delete", "Maintenanceplan", new { area = "ProductionSystem" })/' + data.id,
                        type: 'DELETE',
                        success: function(result) {
                            if (result.success) {
                                layer.msg(result.message, {icon: 1});
                                table.reload('maintenanceplanTable');
                            } else {
                                layer.msg(result.message, {icon: 2});
                            }
                        },
                        error: function() {
                            layer.msg('网络错误，请稍后重试', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            }
        });
        
        // 全局暴露刷新表格的方法，供子页面调用
        window.refreshMaintenanceplanTable = function() {
            console.log('刷新表格被调用');
            table.reload('maintenanceplanTable');
        };
        
        console.log('所有事件绑定完成');
    });
});
</script>

</body>
</html> 